<template>
  <div>
    <div class="titleBox">
      <div class="icon-xinxi iconfontcolor"></div>
      <h3 class="title">合同信息</h3>
      <div class="line"></div>
    </div>
    <div class="list">
      <el-table style="width: 100%" :data="contractInfoData">
        <el-table-column align="center" prop="SerialNumber" label="序号">
          <template slot-scope="scope">{{ scope.$index+1 }}</template>
        </el-table-column>
        <el-table-column prop="contractId" label="合同编号"> </el-table-column>
        <el-table-column align="center" prop="projectName" label="项目名称">
        </el-table-column>
        <el-table-column align="center" label="计费标准">
          <template slot-scope="scope">
            <div>{{ scope.row.charging }}{{ scope.row.chargingUnit }}</div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="settlementPeriod"
          label="结算账期"
        >
          <template slot-scope="scope">
            <div>
              {{ scope.row.settlementPeriod
              }}{{ scope.row.settlementPeriodUnit }}
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="earnestMoney" label="保证金">
        </el-table-column>
        <el-table-column
          align="center"
          prop="contractEndTime"
          label="合同结束日期"
        >
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <div>
              <el-button
                type="text"
                size="small"
                @click="getDetail(scope.row.contractId)"
                >详情</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 详情对话框 -->
    <el-dialog class="contractDialog" title="合同详情" :visible.sync="dialogVisible" width="672px">
      <el-descriptions
        class="descriptions"
        :column="2"
        :labelStyle="{
          color: '#939393',
          fontSize: '12px',
          fontWeight: 'bold',
          marginRight: '20px',
        }"
        :contentStyle="{
          color: '#262626',
          fontSize: '12px',
        }"
      >
        <el-descriptions-item label="合同编号">{{
          contractInfoDetails.contractNumber ||'无'
        }}</el-descriptions-item>
        <el-descriptions-item label="项目名称">{{
          contractInfoDetails.projectName ||'无'
        }}</el-descriptions-item>
        <el-descriptions-item label="计费标准">{{
          contractInfoDetails.chargingUnit ||'无'
        }}</el-descriptions-item>
        <el-descriptions-item label="结算账期">
          <div v-if="contractInfoDetails.settlementPeriod">  {{ contractInfoDetails.settlementPeriod
          }}{{ contractInfoDetails.settlementPeriodUnit }}</div>
          <div v-else>无</div>
        </el-descriptions-item>
        <el-descriptions-item label="发票类型">{{
          contractInfoDetails.invoiceTypeStr ||'无'
        }}</el-descriptions-item>
        <el-descriptions-item label="发票税率">{{
          contractInfoDetails.taxRate + '%' ||'无'
        }}</el-descriptions-item>
        <el-descriptions-item label="合同期限">{{
          contractInfoDetails.contractPeriod + contractInfoDetails.contractPeriodUnit ||'无'
        }}</el-descriptions-item>
        <el-descriptions-item label="保证金">{{
          contractInfoDetails.earnestMoney ||'无'
        }}</el-descriptions-item>
        <el-descriptions-item label="合同开始日期">{{
          contractInfoDetails.contractStartTime ||'无'
        }}</el-descriptions-item>
        <el-descriptions-item label="合同结束日期">{{
          contractInfoDetails.contractEndTime ||'无'
        }}</el-descriptions-item>
        <el-descriptions-item label="合同备注">{{
          contractInfoDetails.contractRemarks ||'无'
        }}</el-descriptions-item>
        <el-descriptions-item label="附件">
          <el-button
            style="padding: 0;line-height: 18px;"
            type="text"
            size="small"
            @click.native="goUrl(contractInfoDetails.signImage)"
          >
            点击查看附件
          </el-button>
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script>
import httpApi from "@/http";
export default {
  props: {
    contractInfoData: Array,
  },
  data() {
    return {
      dialogVisible: false,
      contractInfoDetails: {},
    };
  },
  methods: {
    goUrl(url) {
      window.open(url, "_blank");
    },
    getDetail(id) {
      this.dialogVisible = true;
      // console.log('11111',id);
      httpApi.cargoOwnerApi
        .getcontractInfoDetails({ contractId: id })
        .then((res) => {
          // console.log("合同信息子详情数据", res);
          this.contractInfoDetails = res.data.data;
        });
    },

  },
  mounted() {},

};
</script>

<style lang="scss" scoped>
.titleBox {
  display: flex;
  align-items: center;
  margin-bottom: 14px;
  > .icon-xinxi {
    font-size: 16px;
    margin-right: 7px;
  }
  > .title {
    color: #262626;
    font-size: 14px;
    margin-right: 14px;
  }
  > .line {
    height: 1px;
    flex: 1;
    background-color: #f0f0f0;
  }
}
.list {
  height: calc(100% - 48px);
  ::v-deep .el-table__body-wrapper {
    max-height: calc(100vh - 335px) !important;
    overflow-y: scroll;
  }
  // 表头样式
  ::v-deep .el-table__header th {
    background-color: #f0f6fd;
    color: #262626;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    // 表 body的td
    ::v-deep .el-table__body td {
      color: #595959;
      font-size: 12px;
    }
  }
}
.contractDialog{
  
  ::v-deep .el-dialog__header {
    border-bottom: 1px solid #f0f0f0;
    padding: 15px 20px;
    color: #262626;
    font-size: 14px;
    font-weight: bold;
    height: 50px;
  }

  ::v-deep .el-dialog__title {
    font-size: 14px;
    color: #303133;
    font-weight: bold;
  }

  //关闭图标
  ::v-deep .el-dialog__headerbtn .el-dialog__close {
    font-size: 15px;
  }

  ::v-deep .el-dialog__body {
    padding: 20px;
  }
}
</style>
